<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var $ = function (a) {
            return document.getElementById(a)
        };

        var G = '男';

        var L = '女';

        var stdents = [
            ['张三','G',21,''],
            ['李四','L',22,''],
            ['王五','G',23,''],
            ['赵六','L',24,''],
        ];

        for (var i = 0 ;i < stdents.length; i++) {
            var arr = stdents[i];//表示应该在此建立行
        }

        //新建一个表格在body里面
        var _table = document.createElement('table');
        _table.style.width = '80%';
        _table.style.height = '30%';
        _table.style.border = '1px solid grey';
        _table.style.margin = '0 auto';

        //表格的列头
        var tr = document.createElement('tr');


        document.body.appendChild(_table);

        //

        //当页面加载完成的时候
        window.onload = function () {
                //花名册点击事件
                $("roster").onclick = function () {
                    alert('nm');
                    _table();
                }
          };



    </script>
</head>
<body>
        <button style="margin: 200px 600px;" id="roster">花名册</button>
</body>
</html>